<template>
  <view class="exclusive-enjoyment px-24rpx">
    <view class="top">
      <image class="w-168rpx h-28rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-glod-zhunxiang.svg"></image>
    </view>
    <view class="item mt-32rpx pb-50rpx flex">
      <view class="item-left">
        <image class="w-56rpx h-56rpx pr-16rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon_member.svg"></image>
        <view class="flex flex-col" @click="handleMemberCenter">
          <view class="flex pb-10rpx">
            <text class="text-#FFFFFF text-28rpx">会员中心</text>
            <uv-icon name="arrow-right" class="pl-10rpx pt-6rpx" color="#ffffff" size="12"></uv-icon>
          </view>
          <view v-if="userInfo.memberFlag === 1" class="text-#aaaaaa text-24rpx">您已成为会员</view>
          <view v-else class="text-#aaaaaa text-24rpx">成为会员，线索优先</view>
        </view>
      </view>
      <view class="line"></view>
      <view class="item-right">
        <image
          class="w-56rpx h-56rpx pr-24rpx"
          src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon_gold_channel.svg"
        ></image>
        <view class="flex flex-col" @click="handleGoldChannel">
          <view class="flex pb-10rpx">
            <text class="text-#FFFFFF text-28rpx">盟友合伙人</text>
            <uv-icon name="arrow-right" class="pl-10rpx pt-6rpx" color="#ffffff" size="12"></uv-icon>
          </view>
          <view v-if="userInfo.goldChannelFlag === 1" class="text-#aaaaaa text-24rpx">您已成为盟友合伙人</view>
          <view v-else class="text-#aaaaaa text-24rpx">额外返佣，增加曝光</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script name="membershipCard" setup>
const props = defineProps({
  userInfo: {
    type: Object,
    default: () => {}
  }
});

const emits = defineEmits(['handleMemberCenter', 'handleGoldChannel']);
// 会员中心
const handleMemberCenter = () => {
  emits('handleMemberCenter');
};

// 金牌渠道
const handleGoldChannel = () => {
  emits('handleGoldChannel');
};
</script>

<style lang="scss" scoped>
.exclusive-enjoyment {
  background-image: linear-gradient(to bottom, #0f0f0f, #363636);
  border-radius: 4px;
  .top {
    font-size: 28rpx;
    font-weight: bold;
    background: linear-gradient(45deg, #ead095, #d5b27c);
    -webkit-background-clip: text;
    color: transparent;
    padding: 28rpx 0;
    border-bottom: 2rpx solid rgba(55, 55, 55, 0.9);
  }
  .item {
    display: flex;
    justify-content: space-around;
    &-left,
    &-right {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .line {
      width: 1rpx;
      background-color: rgba(55, 55, 55, 0.9);
    }
  }
}
</style>
